<template>
  <div>
    <h3>会员修改</h3>
    {{ info }}
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">会员编号</td>
          <td><input type="text" v-model="info.Code" disabled /></td>
        </tr>
        <tr>
          <td align="right">手机号</td>
          <td><input type="text" v-model="info.Phone" maxlength="11" /></td>
        </tr>
        <tr>
          <td align="right">姓名</td>
          <td><input type="text" v-model="info.Name" /></td>
        </tr>
        <tr>
          <td align="right">身份证号码</td>
          <td><input type="text" v-model="info.Card" maxlength="18" /></td>
        </tr>
        <tr>
          <td align="right">会员等级</td>
          <td>
            <select v-model="info.LevelName">
              <option value="">请选择</option>
              <option
                :value="item.LevelName"
                v-for="item in list.a"
                :key="item.Id"
              >
                {{ item.LevelName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">会员生日</td>
          <td><input type="date" v-model="info.BirthDay" /></td>
        </tr>
        <tr>
          <td align="right">性别</td>
          <td>
            <input type="radio" name="sex" v-model="info.Sex" :value="1" />男
            <input type="radio" name="sex" v-model="info.Sex" :value="0" />女
          </td>
        </tr>
        <tr>
          <td align="right">积分</td>
          <td><input type="text" v-model="info.Score" /></td>
        </tr>
        <tr>
          <td align="right">余额</td>
          <td><input type="text" v-model="info.Money" /></td>
        </tr>
        <tr>
          <td align="right">爱好</td>
          <td>
            <input
              type="checkbox"
              name="likes"
              v-model="info.Likes"
              value="喝歌"
            />喝歌
            <input
              type="checkbox"
              name="likes"
              v-model="info.Likes"
              value="跳舞"
            />跳舞
            <input
              type="checkbox"
              name="likes"
              v-model="info.Likes"
              value="吃"
            />吃
            <input
              type="checkbox"
              name="likes"
              v-model="info.Likes"
              value="打篮球"
            />打篮球
          </td>
        </tr>
        <tr>
          <td align="right">简介</td>
          <td>
            <textarea rows="5" cols="50" v-model="info.Desc"></textarea>
          </td>
        </tr>
        <tr>
          <td align="right">是否含有早餐</td>
          <td><input type="checkbox" v-model="info.IsBreak" />是否含有早餐</td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
//ref reactive 创建响应式数据
//onMounted 相当于文档就绪函数  生命周期钩子函数
import { ref, reactive, onMounted } from 'vue';
//axios发送网络请求
import axios from 'axios';
//useRouter 实现页面跳转并且可以传递参数
//useRoute 路由信息对象  可以用来接受参数
import { useRouter, useRoute } from 'vue-router';

import moment from 'moment';
const router = useRouter();
const route = useRoute();

//变量

//声明一个变量存储向后端增加会员时的数据
let info: any = reactive({
  Id: route.query.id,
  Code:
    moment(new Date()).format('YYYYMMDD') +
    Math.random().toString().substring(2, 5), //当前年月日+三位随机数
  Phone: '',
  Name: '',
  Card: '',
  LevelName: '',
  BirthDay: '',
  Sex: 1,
  Score: '',
  Money: '',
  Likes: [],
  Desc: '',
});

onMounted(() => {
  getData();
});

//2.返填
const getData = () => {
  axios({
    url: '/api/Members/GetMemberModel',
    method: 'get',
    params: {
      id: route.query.id, //跳转传递过来的id
    },
  })
    .then((res) => {
      console.log(res);

      Object.assign(info, res.data);
      info.BirthDay = res.data.BirthDay.substring(0, 10);
      info.Likes = res.data.Likes.split(',');
      if (res.data.IsBreak == '是') {
        info.IsBreak = true;
      } else {
        info.IsBreak = false;
      }
      // info.Code = res.data.Code;
      // info.Phone = res.data.Phone;
    })
    .catch((err) => {
      console.log(err);
    });
};

//2.读取会员等级
//声明一个变量存储一个后端返回的数据
let list: any = reactive({
  a: [],
});

// let list: any = ref([]);

//onMounted 叫生命周期函数  相当于文档就绪函数

onMounted(() => {
  getList();
});

const ok = () => {
  //1.有效性验证
  if (info.Phone == '') {
    alert('手机号不能为空');
    return;
  }
  let reg = /^1[3-9]\d{9}$/;
  if (reg.test(info.Phone) == false) {
    alert('手机号不合法');
    return;
  }
  if (info.Name == '') {
    alert('姓名不能为空');
    return;
  }
  if (info.Card == '') {
    alert('身份证号码不能为空');
    return;
  }
  let reg1 = /^\d{17}[0-9xX]$/;
  if (reg1.test(info.Card) == false) {
    alert('身份证号码不合法');
    return;
  }

  if (info.LevelName == '') {
    alert('等级必选');
    return;
  }

  if (info.BirthDay == '') {
    alert('生日不能为空');
    return;
  }

  if (info.Score === '') {
    alert('积分不能为空');
    return;
  }

  //积分只能是正整数
  let reg2 = /^[0-9]\d*$/;
  if (reg2.test(info.Score) == false) {
    alert('积分必须是正整数');
    return;
  }

  if (info.Money === '') {
    alert('余额不能为空');
    return;
  }
  let reg3 = /^[0-9]\d*$/;
  if (reg3.test(info.Money) == false) {
    alert('余额必须是正整数');
    return;
  }

  if (info.Likes.length == 0) {
    alert('爱好必选');
    return;
  }
  //2.发送网络请求做增加操作
  info.Likes = info.Likes.toString();
  axios({
    url: '/api/Members/UpdateMemebrOk',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        router.push('/memberList');
      } else if (res.data == -1) {
        alert('手机号重复');
        return;
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取会级等级显示列表
const getList = () => {
  axios({
    url: '/api/Members/GetMemberLevelList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      // list.value = res.data;
      list.a = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
